<template>
  <div>
    <!-- from表单 -->
    <el-drawer
      :with-header="false"
      :visible.sync="drawershow"
      size="40%"
    >
      <p class="top">图标管理</p>
      <el-button type="primary" style="float:left;margin:0rem 0rem 1rem 1rem" @click="showDialog(1)">添加图标</el-button>
      <el-table
        :data="IconsDatas.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        height="70%"
        border
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="iconName"
          label="名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="iconUrl"
          label="图标"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.iconUrl" style="width: 2rem;">
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="showDialog(2,scope.row.iconId)">修改</el-button>
            <el-button type="danger" @click="deleteIcon(scope.row.iconId)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div id="pages" class="paging-info">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pagesize"
          layout="total , sizes , prev , pager , next"
          :total="IconsDatas.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-drawer>
    <el-dialog
      title="添加图标"
      :visible.sync="dialogshow"
      width="25rem"
      :before-close="closeDialog"
    >
      <el-form ref="IconsData" label-position="left" :model="IconsData">
        <el-form-item label="图标名称" prop="iconName" :rules="{required: true, message: '图标名称不能为空', trigger: 'blur'}">
          <el-input
            v-model="IconsData.iconName"
            clearable
            maxlength="5"
            show-word-limit
            style="width:50%"
          />
        </el-form-item>
        <el-form-item label="图标上传" prop="iconUrl" :rules="{required: true, message: '图标上传不能为空', trigger: 'blur'}">
          <el-upload
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="IconsData.iconUrl" :src="IconsData.iconUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="sendDialog('IconsData')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addOneIcon, deleteOneIcon, updateOneIcon, getAllIcons, getOneIcons } from '../../api/icon.js'
export default {
  props: {
  },
  data() {
    return {
      // 后台获取数据
      routerInfo: {},
      // 页面存储数据
      drawershow: false, // drawer展示
      dialogshow: false, // dialog展示
      currentPage: 1, // 默认显示页面为1
      pagesize: 10, // 每页的数据条数
      IconsDatas: [], // 表单展示数据
      IconsData: {}, // 单个图标数据
      type: 1, // 1添加 2修改
      url: process.env.VUE_APP_BASE_API + 'Image/Images'
    }
  },
  created() {
    // Drawer信息初始化
    this.createDrawerStatus()
  },
  methods: {
    // drawer信息初始化
    createDrawerStatus() {
      this.drawershow = false
    },
    // 展示drawer
    showDrawer() {
      this.drawershow = true
      this.getAllIcon()
    },
    // 关闭drawer
    closeDrawer() {
      this.drawershow = false
      this.IconsDatas = []
    },
    // 展示dialog
    showDialog(type, id) {
      var that = this
      that.dialogshow = true
      that.type = type
      if (type === 1) {
        that.IconsData = {}
      } else {
        getOneIcons(id).then(data => {
          that.$set(that.IconsData, 'iconId', data.obj[0].iconId)
          that.$set(that.IconsData, 'iconName', data.obj[0].iconName)
          that.$set(that.IconsData, 'iconUrl', data.obj[0].iconUrl)
        })
      }
    },
    // 关闭dialog
    closeDialog() {
      this.$confirm('是否确定取消', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogshow = false
        this.IconsData = {}
        this.$refs.IconsData.resetFields()
      }).catch(() => {})
    },
    // 提交dialog
    sendDialog(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.type === 1) {
            this.$confirm('是否确定提交', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              addOneIcon(that.IconsData).then(data => {
                that.getAllIcon()
              })
              this.dialogshow = false
              this.IconsData = {}
            }).catch(() => {})
          } else if (that.type === 2) {
            this.$confirm('是否确定修改', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              updateOneIcon(that.IconsData).then(data => {
                that.getAllIcon()
              })
              this.dialogshow = false
              this.IconsData = {}
            }).catch(() => {})
          }
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    // 选择每页展示数量
    handleSizeChange(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    // 获取所有图标数据
    getAllIcon() {
      var that = this
      getAllIcons().then(data => {
        that.IconsDatas = data.obj
      })
    },

    // 添加图标
    addIcon() {
      this.dialogshow = true
    },
    // 删除图标
    deleteIcon(id) {
      var that = this
      this.$confirm('是否确定修改', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOneIcon(id).then(data => {
          that.getAllIcon()
        })
      }).catch(() => {})
    },
    // 图标链接赋值
    handleAvatarSuccess(res, file) {
      this.$set(this.IconsData, 'iconUrl', file.response.replace(';', ''))
    },
    // 图标格式筛选
    beforeAvatarUpload(file) {
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      const isImage = types.includes(file.type)
      const isLt3M = file.size / 1024 / 1024 < 3

      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
        return false
      }
      return true
    }
  }
}
</script>
<style lang="scss">
.top{
  font-size: 1.5rem;
  text-align: center;
}
.paging-info{
    margin-top: 2rem;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
